<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <script src="js/swiper-4.2.6.min.js" type="text/javascript" charset="utf-8"></script>
    <link rel="stylesheet" type="text/css" href="css/swiper-4.2.6.min.css"/>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script src="js/public.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/jquery-validate.js"></script>
    <script src="js/font.js"></script>
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/ui.css">
    <title></title>
    <!-- 个人中心-支付密码-再次输入支付密码 -->
    <style>
        	*{
				margin: 0;
				padding: 0;
			}
			body {
				padding: 50px;
			}
			.clearfix:after {
				clear: both;
			}
			
			.clearfix:before,
			.clearfix:after {
				content: " ";
				display: table;
			}
			
			.alieditContainer {
				position: relative;
			}
			.sixDigitPassword {
				position: absolute;
				left: -222px;
				top: 0;
				width: 1000px;
				height: 0.5rem;
				color: #fff;
				font-size: 12px;
				-webkit-box-sizing: content-box;
				box-sizing: content-box;
				-webkit-user-select: initial;
				outline: 'none';
				z-index: 999;
				opacity: 0;
				filter: alpha(opacity=0);
			}
			.sixDigitPassword-box {
				cursor: text;
				background: #fff;
				outline: none;
				position: relative;
				padding: 8px 0;
				height: 0.35rem;
				border: 1px solid #cccccc;
                border-radius: 2px;
                margin-left: 0.32rem;
                margin-top: 0.15rem;
			}
			.sixDigitPassword-box i {
				float: left;
				display: block;
				padding: 4px 0;
				height: 0.3rem;
				border-left: 1px solid #cccccc;
			}
			/* .sixDigitPassword-box .active {
				background: url('images/_@2x.png') no-repeat center center;
			} */
			.sixDigitPassword-box b {
				display: block;
				margin: 0 auto;
				width: 0.5rem;
				height: 0.3rem;
				overflow: hidden;
				visibility: hidden;
				background: url('images/_@1x.png') no-repeat center center;
			}
			.sixDigitPassword-box span {
				position: absolute;
				display: block;
				left: 0px;
				top: 0px;
				height: 30px;
				border: 1px solid rgba(82, 168, 236, .8);
				border: 1px solid #00ffff\9;
				border-radius: 2px;
				visibility: hidden;
				-webkit-box-shadow: inset 0px 2px 2px rgba(0, 0, 0, 0.75), 0 0 8px rgba(82, 168, 236, 0.6);
				box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
			}
			.ui-securitycore .ui-form-item .ui-form-explain {
				margin-top: 8px;
			}
			.i-block {
                display: inline-block;
                /* margin-top: 0.15rem; */
                font-size: 0.12rem;
                color: #666;
			}
			.six-password {
				position: relative;
				/* height: 0.5rem; */
				width: 3.7rem;
				overflow: hidden;
                vertical-align: middle;
            }
            #payPassword_rsainput-error{
                margin-left: 0.38rem;
            }
            .sub-btn{
                height: 0.4rem;
                width: 2rem;
                background: #615FD6;
                line-height: 0.4rem;
                text-align: center;
                border-radius: 1rem;
                color: #fff;
                margin:0.1rem auto;
            }
    </style>
</head>
<body>
<div class="scroll-content2 my-mm-sz" style="overflow:auto;background: #F5F5F5;">
    <div class="top-public">
        <span class="public-center">再次输入支付密码</span>        
        <img src="images/left_icon.png" alt="" class="public-left">
    </div>
    <form action="" method="post" name="payPassword" id="form_paypsw">
			<div id="payPassword_container" class="alieditContainer clearfix" data-busy="0">
				<label for="i_payPassword" class="i-block" style="margin-top:0.15rem;margin-left:0.32rem;">请设置邦伲德支付密码，用于支付验证</label><br />
				<div class="i-block" data-error="i_error">
					<div class="i-block six-password">
						<input class="i-text sixDigitPassword" id="payPassword_rsainput" type="tel" autocomplete="off" required="required" value="" name="payPassword_rsainput" data-role="sixDigitPassword" tabindex="" maxlength="6" minlength="6" aria-required="true">
						<div tabindex="0" class="sixDigitPassword-box" style="width: 3.07rem;">
							<i style="width: 0.5rem; border-color: transparent;" class=""><b style="visibility: hidden;"></b></i>
							<i style="width: 0.5rem;"><b style="visibility: hidden;"></b></i>
							<i style="width: 0.5rem;"><b style="visibility: hidden;"></b></i>
							<i style="width: 0.5rem;"><b style="visibility: hidden;"></b></i>
							<i style="width: 0.5rem;"><b style="visibility: hidden;"></b></i>
							<i style="width: 0.5rem;"><b style="visibility: hidden;"></b></i>
							<span style="width: 0.5rem; left: 0px; visibility: hidden;height:0.47rem;" id="cardwrap" data-role="cardwrap"></span>
						</div>
					</div>
				</div>
			</div>
		</form>
		<div class="sub-btn" style="margin-top:20px;">确认</button>
    
</div>
</body>
<script>
$('.public-left').click(function(){
    window.history.go(-1);
})
function xz(obj){
    $('.choice-btn').removeClass('active');
    $(obj).addClass('active').siblings().removeClass('active');
}
</script>

<script>
    // $(function(){
    //     //验证是否登陆
    //     var user_id = sessionStorage.getItem('userId');
    //     if (user_id == null) {
    //         alert('请先登录！');
    //         window.location.href = 'login.html';
    //     }
    //     //获取用户的信息
    //     getUserLists();
    // });
    function getUserLists() {
        var user_id = sessionStorage.getItem("userId"); //用户ID
        $.ajax({
            url: url() + 'api/users/user_details', //请求的url地址
            dataType: "JSON",   //返回格式为json
            async: true,//请求是否异步，默认为异步，这也是ajax重要特性
            type: "POST",   //请求方式
            data:{
                user_id:user_id,
            },
            success: function (data) {
                //请求成功时处理
                if(data.status==1){
                    // console.log(data.result);
                    var html1 = '';
                    var img = imgUrl() + data.result.head_pic;
                    html1 = `
                            <div class="user-img">
                                <img src="${img}" alt="">
                            </div>
                            <ul>
                            <li><span>${data.result.provincial_jane}</span></li>
                            <li>${data.result.reg_time}</li>
                            <li>${data.result.user_code}</li>
                            </ul>
                    `;
                    $('#userList').html(html1);
                } else {
                    alert(data.msg);
                }
            }
        });
    }
</script>
		<script type="text/javascript">
			var _formPay = $('#form_paypsw');
			_formPay.validate({
				rules: {
					'payPassword_rsainput': {
						'minlength': 6,
						'maxlength': 6,
						required: true,
						digits: true
					}
				}
			});
 
			var payPassword = $("#payPassword_container"),
				_this = payPassword.find('i'),
				k = 0,
				j = 0,
				password = '',
				_cardwrap = $('#cardwrap');
			//点击隐藏的input密码框,在6个显示的密码框的第一个框显示光标
			payPassword.on('focus', "input[name='payPassword_rsainput']", function() {
 
				var _this = payPassword.find('i');
				if(payPassword.attr('data-busy') === '0') {
					//在第一个密码框中添加光标样式
					_this.eq(k).addClass("active");
					_cardwrap.css('visibility', 'visible');
					payPassword.attr('data-busy', '1');
				}
 
			});
			//change时去除输入框的高亮，用户再次输入密码时需再次点击
			payPassword.on('change', "input[name='payPassword_rsainput']", function() {
				_cardwrap.css('visibility', 'hidden');
				_this.eq(k).removeClass("active");
				payPassword.attr('data-busy', '0');
			}).on('blur', "input[name='payPassword_rsainput']", function() {
 
				_cardwrap.css('visibility', 'hidden');
				_this.eq(k).removeClass("active");
				payPassword.attr('data-busy', '0');
 
			});
			//使用keyup事件，绑定键盘上的数字按键和backspace按键
			payPassword.on('keyup', "input[name='payPassword_rsainput']", function(e) {
				var e = (e) ? e : window.event;
				//键盘上的数字键按下才可以输入
				if(e.keyCode == 8 || (e.keyCode >= 48 && e.keyCode <= 57) || (e.keyCode >= 96 && e.keyCode <= 105)) {
					k = this.value.length; //输入框里面的密码长度
					l = _this.size(); //6
					for(; l--;) {
						//输入到第几个密码框，第几个密码框就显示高亮和光标（在输入框内有2个数字密码，第三个密码框要显示高亮和光标，之前的显示黑点后面的显示空白，输入和删除都一样）
						if(l === k) {
							_this.eq(l).addClass("active");
							_this.eq(l).find('b').css('visibility', 'hidden');
 
						} else {
							_this.eq(l).removeClass("active");
							_this.eq(l).find('b').css('visibility', l < k ? 'visible' : 'hidden');
 
						}
 
						if(k === 6) {
							j = 5;
						} else {
							j = k;
						}
						$('#cardwrap').css('left', j * 0.51 + 'rem');
 
					}
				} else {
					//输入其他字符，直接清空
					var _val = this.value;
					this.value = _val.replace(/\D/g, '');
				}
			});
			//获取密码
			$('.sub-btn').on('click', function() {
				var reg = new RegExp("^[0-9]*$");//验证数字
				var pass = $('#payPassword_rsainput').val();
				/*PC端测试：主键盘的数字对应的字符对应的keyCode相同，所以也可显示到框中。但是input中value没有数字，判断一下非空即可。
				 *移动端测试： *和#都可输入，需正则验证一下非法字符
				 * */
				if(!pass){
					alert('密码为空，请输入密码');
				}else if(pass.length < 6){
					alert('密码长度为6位');
				}else if(!reg.test(pass)){
					alert("密码含有非法字符，请重新输入");
				}else{
					alert(pass);
				}
			});
		</script>



</html> 






